<template>
  <div class="person">
    <h1>情况五:监视上述的多个数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }},{{ person.car.c2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { reactive, watch } from "vue";

  //数据
  let person = reactive({
    name: "张三",
    age: 18,
    car: {
      c1: "奔驰",
      c2: "宝马",
    },
  });

  //方法
  function changeName() {
    person.name += "~";
  }
  function changeAge() {
    person.age += 1;
  }
  function changeC1() {
    person.car.c1 = "AMG";
  }
  function changeC2() {
    person.car.c2 = "M4";
  }
  function changeCar() {
    person.car = { c1: "雅马哈", c2: "川崎" };
  }

  //监视, 情况五:监视上述的多个数据
  watch(
    [() => person.name, () => person.car.c1],
    (newValue, oldValue) => {
      console.log("person.car变化了", newValue, oldValue);
    },
    { deep: true }
  );
</script>

<style scoped>
  .person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin-left: 5px;
    margin-right: 5px;
  }
</style>
